<template>
	<section class="form_diy">
		<el-form
			ref="form"
			:model="form"
			:rules="rules"
			label-width="120px"
			v-if="content==='yuanData'"
			class="yuan_data_form"
		>
			<p class="title">基本信息：</p>
			<el-form-item label="字段名" prop="zdName">
				<el-input v-if="type==='add'" v-model="form.zdName"></el-input>
				<el-input v-if="type=='update'" v-model="detail.name"></el-input>
				<span v-if="type==='detail'">{{detail.name}}</span>
			</el-form-item>
			<el-form-item label="字段值" prop="zdval">
				<el-input v-if="type==='add'" v-model="form.zdval"></el-input>
				<el-input v-if="type==='update'" v-model="detail.key"></el-input>
				<span v-if="type==='detail'">{{detail.key}}</span>
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-radio-group v-if="type==='add'" v-model="form.type">
					<el-radio label="1">字符</el-radio>
					<el-radio label="2">数值</el-radio>
					<el-radio label="3">Base64</el-radio>
				</el-radio-group>
				<el-radio-group v-if="type==='update'" v-model="detail.dataType" >
					<el-radio :label="1">字符</el-radio>
					<el-radio :label="2">数值</el-radio>
					<el-radio :label="3">Base64</el-radio>
				</el-radio-group>
				<span v-if="type==='detail'">{{dataType[detail.dataType]}}</span>
			</el-form-item>
			<el-form-item label="适用类型" prop="shiyongType">
				<el-radio-group v-if="type==='add'" v-model="form.shiyongType">
					<el-radio label="1">采集类</el-radio>
					<el-radio label="2">共享返回类</el-radio>
					<el-radio label="3">共享请求类</el-radio>
				</el-radio-group>
				<el-radio-group v-if="type==='update'" v-model="detail.type">
					<el-radio :label="1">采集类</el-radio>
					<el-radio :label="2">共享返回类</el-radio>
					<el-radio :label="3">共享请求类</el-radio>
				</el-radio-group>
				<span v-if="type==='detail'">{{shiyongType[detail.type]}}</span>
			</el-form-item>
			<!--***************************************-->
			<p style="border-bottom:1px dashed rgb(156, 156, 156);margin-bottom: 30px;"></p>
			<p class="title">校验规则：</p>
			<el-form-item label="长度不超过">
				<el-input
					v-if="type==='add'"
					v-model="form.maxWidth"
					style="width: 90%;margin-right: 10px;"
					type="number"
				></el-input>
				<span v-if="type==='add'">位</span>
				<el-input
					v-if="type==='update'"
					v-model="detail.maxLen"
					style="width: 90%;margin-right: 10px;"
					type="number"
				></el-input>
				<span v-if="type==='update'">位</span>
				<span v-if="type==='detail'">{{detail.maxLen}}</span>
			</el-form-item>
			<el-form-item label="长度不少于">
				<el-input
					type="number"
					v-if="type==='add'"
					v-model="form.minWidth"
					style="width: 90%;margin-right: 10px;"
				></el-input>
				<span v-if="type==='add'">位</span>
				<el-input
					type="number"
					v-if="type==='update'"
					v-model="detail.minLen"
					style="width: 90%;margin-right: 10px;"
				></el-input>
				<span v-if="type==='update'">位</span>
				<span v-if="type==='detail'">{{detail.minLen}}</span>
			</el-form-item>
			<!--				  
				  <el-form-item label="通用校验">
				    <el-checkbox-group v-if="type==='add'" v-model="form.jiance">
				      <el-checkbox label="SFZ" name="type">身份证</el-checkbox>
				      <el-checkbox label="phone" name="type">手机号码</el-checkbox>
				      <el-checkbox label="email" name="type">邮箱</el-checkbox>
				      <el-checkbox label="time" name="type">时间</el-checkbox>
				      <el-checkbox label="carCode" name="type">车牌号</el-checkbox>
				      <el-checkbox label="IP" name="type">IP地址</el-checkbox>
				    </el-checkbox-group>
				    <span v-if="type==='detail'">{{detail.jiance}}</span>
			</el-form-item>-->

			<el-form-item label="类型校验">
				<el-radio-group v-if="type==='add'" v-model="form.resource">
					<el-radio label="1">身份证</el-radio>
					<el-radio label="2">手机号码</el-radio>
					<el-radio label="3">邮箱</el-radio>
					<el-radio label="4">时间</el-radio>
					<el-radio label="5">日期</el-radio>
					<el-radio label="6">车牌号</el-radio>
					<el-radio label="7">IP地址</el-radio>
					<el-radio label="8">纯英文</el-radio>
					<el-radio label="9">纯数字</el-radio>
				</el-radio-group>
				<el-radio-group v-if="type==='update'" v-model="detail.ruleIds">
					<el-radio :label="'1'">身份证</el-radio>
					<el-radio :label="'2'">手机号码</el-radio>
					<el-radio :label="'3'">邮箱</el-radio>
					<el-radio :label="'4'">时间</el-radio>
					<el-radio :label="'5'">日期</el-radio>
					<el-radio :label="'6'">车牌号</el-radio>
					<el-radio :label="'7'">IP地址</el-radio>
					<el-radio :label="'8'">纯英文</el-radio>
					<el-radio :label="'9'">纯数字</el-radio>
				</el-radio-group>
				<span v-if="type==='detail'">{{TypeRuleds[detail.ruleIds]}}</span>
			</el-form-item>
			<el-form-item label="其他规则">
				<el-input v-if="type==='add'" type="textarea" v-model="form.desc"></el-input>
				<el-input v-if="type==='update'" type="textarea" v-model="detail.otherRule"></el-input>
				<span v-if="type==='detail'">{{detail.otherRule}}</span>
			</el-form-item>
			<el-form-item>
				<el-button v-if="type!='detail'" type="primary" @click="onSubmitYuanData">确定</el-button>
				<el-button v-if="type!='detail'" @click="closeForm">取消</el-button>
			</el-form-item>
		</el-form>
		<!--************************************************************************************************************************-->
		<el-form ref="form" :model="form" label-width="120px" v-if="content==='dataOrigin'">
			<el-form-item label="字段名">
				<el-input v-if="type==='add'" v-model="form.zdName"></el-input>
				<span v-if="type==='detail'">{{detail.name}}</span>
			</el-form-item>
			<el-form-item label="字段值">
				<el-input v-if="type==='add'" v-model="form.zdval"></el-input>
				<span v-if="type==='detail'">{{detail.key}}</span>
			</el-form-item>
			<el-form-item label="类型">
				<el-radio-group v-if="type==='add'" v-model="form.type">
					<el-radio label="zifu">字符</el-radio>
					<el-radio label="num">数值
						<el-input v-model="form.nums" :maxlength="1" style="width: 40px;"></el-input>位
					</el-radio>
					<el-radio label="Base64">Base64</el-radio>
				</el-radio-group>
				<span v-if="type==='detail'">{{detail.type}}</span>
			</el-form-item>
			<el-form-item label="适用类型">
				<el-radio-group v-if="type==='add'" v-model="form.shiyongType">
					<el-radio label="caiji">采集类</el-radio>
					<el-radio label="fanhui">共享返回类</el-radio>
					<el-radio label="qingqiu">共享请求类</el-radio>
				</el-radio-group>
				<span v-if="type==='detail'">{{detail.shiyongType}}</span>
			</el-form-item>
			<!--***************************************-->
			<el-form-item label="长度不超过">
				<el-input v-if="type==='add'" v-model="form.maxWidth" style="width: 90%;margin-right: 10px;"></el-input>
				<span v-if="type==='add'">位</span>
				<span v-if="type==='detail'">{{detail.maxLen}}</span>
			</el-form-item>
			<el-form-item label="长度不少于">
				<el-input v-if="type==='add'" v-model="form.minWidth" style="width: 90%;margin-right: 10px;"></el-input>
				<span v-if="type==='add'">位</span>
				<span v-if="type==='detail'">{{detail.minLen}}</span>
			</el-form-item>
			<el-form-item label="通用校验">
				<el-checkbox-group v-if="type==='add'" v-model="form.jiance">
					<el-checkbox label="SFZ" name="type">身份证</el-checkbox>
					<el-checkbox label="phone" name="type">手机号码</el-checkbox>
					<el-checkbox label="email" name="type">邮箱</el-checkbox>
					<el-checkbox label="time" name="type">时间</el-checkbox>
					<el-checkbox label="carCode" name="type">车牌号</el-checkbox>
					<el-checkbox label="IP" name="type">IP地址</el-checkbox>
				</el-checkbox-group>
				<span v-if="type==='detail'">{{detail.jiance}}</span>
			</el-form-item>
			<el-form-item label="类型校验">
				<el-radio-group v-if="type==='add'" v-model="form.resource">
					<el-radio label="eng">纯英文</el-radio>
					<el-radio label="num">纯数字</el-radio>
					<el-radio label="eng">身份证</el-radio>
					<el-radio label="num">手机号码</el-radio>
					<el-radio label="eng">邮箱</el-radio>
					<el-radio label="num">时间</el-radio>
					<el-radio label="eng">车牌号</el-radio>
					<el-radio label="eng">IP地址</el-radio>
				</el-radio-group>
				<span v-if="type==='detail'">{{detail.resource}}</span>
			</el-form-item>
			<el-form-item label="其他规则">
				<el-input v-if="type==='add'" type="textarea" v-model="form.desc"></el-input>
				<span v-if="type==='detail'">{{detail.desc}}</span>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">确定</el-button>
				<el-button @click="closeForm">取消</el-button>
			</el-form-item>
		</el-form>
	</section>
</template>

<script>
export default {
  props: {
    type: "",
    content: "",
    detail: {
      type: Object
    }
  },
  data() {
    return {
      form: {
        zdName: "",
        zdval: "",
        type: "",
        shiyongType: "",
        maxWidth: "",
        minWidth: "",
        resource: "",
        desc: ""
      },
      rules: {
				zdName: [{ required: true, message: "请输入字段名", trigger: "blur" }],
				zdval: [{ required: true, message: "请输入字段值", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        shiyongType: [{ required: true, message: "请选择适用类型", trigger: "change" }]
      },
      dataType: ["", "字符", "数值", "base64"],
      shiyongType: ["", "采集类", "共享返回类", "共享请求类"],
      TypeRuleds: [
        "",
        "身份证",
        "手机号码",
        "邮箱",
        "时间",
        "日期",
        "车牌号",
        "IP地址",
        "纯英文",
        "纯数字"
      ],
      form2: {},
      detail2: {},
      test: 2
    };
  },
  methods: {
    onSubmitYuanData() {
      // this.$emit("insertData", this.form);
      // 清空上条数据
      // this.form = {};
      if (this.type === "add") {
        this.$emit("insertData", this.form);
        //清空上条数据
        this.form = {};
      } else if (this.type === "update") {
        this.$emit("insertData", this.detail);
      }
		},
		closeForm(){
			this.$emit('closeForm');
			this.form = {};
		}
  }
};
</script>

<style scoped="scoped">
.title {
  font-size: 20px;
  margin-bottom: 10px;
}
.yuan_data_form .el-radio {
  margin-left: unset;
  margin-right: 30px;
  margin-bottom: 10px;
}
</style>